<template>
  <div class="je-admin-third-login">
    <img
      v-show="state.showOriginalImage"
      class="bg-image"
      :src="state.bgOriginalImage"
      @load="state.showOriginalImage = true"
    />
    <img
      v-show="!state.showOriginalImage"
      class="bg-image fade-out"
      :src="state.bgThumbnailImage"
    />
    <div class="login-dept">
      <div class="login-dept-header">
        <img :src="state.logoImage" class="login-dept-header-logo" />
      </div>
      <div class="login-dept-title">{{ $t('depart.title') }}</div>
      <div class="login-dept-items">
        <div
          v-for="(dept, index) in state.depts"
          :key="index"
          class="login-dept-items-item"
          @click="doLogin(dept)"
          >{{ dept.name }}</div
        >
      </div>
    </div>
  </div>
</template>
<script>
  import { useGlobalStore } from '@common/store/global-store';
  import { defineComponent, reactive } from 'vue';
  import { loadPlanConfig } from '@/data/api/setting';
  import { loadThirdTempCodeApi, getLoginImageUrl } from '@/helper/third';
  import { decode, loginApi } from '@jecloud/utils';
  import { useRoute, useRouter } from 'vue-router';
  import { Modal } from '@jecloud/ui';
  export default defineComponent({
    setup() {
      const globalStore = useGlobalStore();
      const route = useRoute();
      const router = useRouter();
      const state = reactive({
        bgOriginalImage: '',
        bgThumbnailImage: '',
        showOriginalImage: false,
        logoImage: '',
        depts: [],
        account: '',
        url: '',
      });
      const { tempCode, plan } = route.params;
      // 方案配置
      loadPlanConfig(plan).then((data) => {
        const images = decode(data.JE_SYS_BACKGROUNDLOGO || '[]');
        const image = Array.isArray(images) ? images[0] : images;
        state.bgOriginalImage = getLoginImageUrl(image.fileKey);
        state.bgThumbnailImage = getLoginImageUrl(image.fileKey, true);
        const logos = decode(data.JE_SYS_TITLELOGO || '[]');
        const logo = Array.isArray(logos) ? logos[0] : logos;
        state.logoImage = getLoginImageUrl(logo.fileKey);
      });
      // 三方登录信息
      loadThirdTempCodeApi(tempCode).then((data) => {
        Object.assign(state, data);
      });
      // 登录
      const doLogin = (dept) => {
        loginApi({
          account: state.account,
          deptId: dept.id,
          code: tempCode,
        })
          .then((token) => {
            globalStore.setToken(token);
            router.push({ path: state.url, query: route.query });
          })
          .catch((data) => {
            Modal.alert(data.message);
          });
      };

      return { state, doLogin };
    },
  });
</script>
<style lang="less">
  .je-admin-third-login {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-dept {
      width: 440px;
      height: 540px;
      background-color: #fff;
      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      z-index: 1;
      &-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 140px;
        &-logo {
          max-width: 360px;
          max-height: 80px;
        }
      }
      &-title {
        font-size: 20px;
        text-align: center;
      }

      &-items {
        text-align: center;
        padding-top: 20px;
        &-item {
          width: 100%;
          height: 48px;
          line-height: 48px;
          font-size: 16px;
          padding: 0 20px;
          color: @text-color;
          border-bottom: 1px solid #f5f5f5;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
          width: 340px;
          display: inline-block;
          text-align: left;
          &:hover {
            color: @primary-color;
          }
        }
      }
    }

    .bg-image {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .fade-out {
      filter: blur(10px);
    }
  }
</style>
